<template>
	<view class="content">

		<!-- 用户头像header -->
		<view class='member-top'>
			<view class='member-top-c' style="margin: 0 17px;width: auto;">
				<template v-if="userToken!=''">
					<!--已经授权-->
					<view style="display: flex;justify-content: space-between;flex-direction: row;height: 92px;align-items: center;width: 100%;" >
						<view class="user-head-img" style="margin: 0;" @click="hanldToUserInfo()">
							<image class='user-head-img' mode="aspectFill" :src='userInfo.avatar'  @click="hanldToUserInfo()" style="margin: 0;"></image>
						</view>
						<view class="login-name-but" style="">
							<view>{{ userInfo.nickname }}</view>
							<view style="font-size: 12px;color: #D62222;border: 1px solid #D62222;border-radius: 4px;width: 138upx;text-align: center;margin-top: 10upx;;" @click="hanldPhone()" v-if="userToken==''">绑定手机号</view>
							<view style="font-size: 12px;color: #D62222;margin-top: 10upx;;" v-else>{{userInfo.mobile}}</view>
						</view>
						<view style="width:52px;height:22px;border-radius:4px;border:0.5px solid rgba(214,34,34,1);color: #D62222;text-align: center;line-height: 40upx;" @click="handCoin()">充值</view>
					</view>

				</template>
				<template v-else>
					<!-- #ifdef H5 || APP-PLUS -->
					<image class='user-head-img' mode="aspectFill" :src='$store.state.config.shop_logo'></image>
					<view class="login-btn" @click="toLogin">
						登录/注册
					</view>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<!--未授权-->
					<view style="display: flex;justify-content: space-between;flex-direction: row;height: 92px;align-items: center;width: 100%;
" >
						<view class="user-head-img" style="margin: 0;" @click="hanldToUserInfo()">
							<image class='user-head-img' mode="aspectFill" src="../../../static/images/kefuyuan.png" style="margin: 0;"></image>
						</view>
						<view class="ph-wrapper" >
							<view class="login-name-but" hover-class="btn-hover" @click="goLogin()" style="margin-left: 0;">立即授权</view>
							<view style="font-size: 12px;color: #D62222;border: 1px solid #D62222;border-radius: 4px;width: 138upx;text-align: center;margin-top: 10upx;;" @click="hanldPhone()">绑定手机号</view>
						</view>
						<image src="../../../static/images/right-ion.png" style="width: 16px;height: 16px;"></image>
					</view>
					<!--未授权-->
					

					<!-- #endif -->
				</template>

			</view>
		</view>
		<!-- 用户头像header end -->

		<!-- 订单列表信息 -->
		<view class='cell-group'>
			<view class='cell-item right-img'>
				<view class='cell-item-hd'>
					<view class='cell-hd-title' style="font-size: 14px;color: #333333;padding: 16px 13px 0px 0;font-weight: bold;">我的配件</view>
				</view>
			</view>
		</view>

		<view class='member-grid' style="color: #666666;">
			<view class='member-item' v-for="(item, index) in orderItems" :key="index" @click="orderNavigateHandle('../order/orderlist', index + 1)">
				<view class="badge color-f" v-if="item.nums">{{ item.nums }}</view>
				<image class='member-item-icon' :src='item.icon'></image>
				<text class='member-item-text' style="margin-top: 4px;display: block;">{{ item.name }}</text>
			</view>

		</view>
		<!-- 订单列表end -->

		<!-- 其他功能菜单 -->
		<!-- 列表样式 -->
		<view class="" v-if="list == 1">
			<view class='cell-group margin-cell-group right-img'>
				<view class='cell-item' v-for="(item, index) in utilityMenus" :key="index" v-if="!item.unshowItem" style="border-bottom: 0.5px solid #F5F5F5;padding: 5px 0 4px 0;" @click="navigateToHandle(item.router)">
					<view class='cell-item-hd' >
						<image class='cell-hd-icon' :src='item.icon'></image>
						<view class='cell-hd-title'>{{ item.name }}</view>
					</view>
					<view class='cell-item-ft' style="right: 14px;">
						<text v-if="item.name=='余额'&&userToken" style="color: #D62222;font-size: 15px;padding-right: 4px;">￥{{userInfo.balance}}</text>
						<image class='cell-ft-next icon' src='/static/images/right.png' style="width: 16px;height: 16px"></image>
					</view>
				</view>
			</view>

			<view class='cell-group margin-cell-group right-img' v-if="order" style="margin-top: 10px;">
				<view class="sale-title">
					<view style="font-weight: bold;font-size: 14px;padding: 13px 0px 5px 17px;">
						我的二手车
					</view>
				</view>
				<view class='cell-item' v-for="(item, index) in order" :key="index" style="border-bottom: 0.5px solid #F5F5F5;padding: 5px 0 4px 0;"  @click="navigateToHandle(item.router)">
					<view class='cell-item-hd'>
						<image class='cell-hd-icon' :src='item.icon'></image>
						<view class='cell-hd-title'>{{ item.name }}</view>
					</view>
					<view class='cell-item-ft' style="right: 14px;">
						<image class='cell-ft-next icon' src='/static/images/right.png' style="width: 16px;height: 16px;"></image>
					</view>
				</view>
				<!-- #ifdef H5 || APP-PLUS-NVUE || APP-PLUS -->
	
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->

				<!-- #endif -->
				<!-- #ifdef MP-TOUTIAO -->
	
				<!-- #endif -->
				<!-- #ifdef MP-ALIPAY -->

				<!-- #endif -->
			</view>

		</view>

		<!-- 表格样式 -->
		<view class="margin-cell-group" v-else>
			<view class="sale-block bgf">

				<view class="flc sale-list">
					<view class="item tc" v-for="(item,i) in utilityMenus" :key="i" v-if="(!item.unshowItem && i != 'invoice') || (!item.unshowItem && i == 'invoice' && invoice_switch == 1)" @click="navigateToHandle(item.router)">
						<view class="" >
							<view class="">
								<image class='cell-hd-icon' :src='item.icon'></image><text class="">{{item.name}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="sale-block bgf" v-if="store_switch && isClerk">
				<view class="sale-title">
					<image class='cell-hd-icon' src='/static/image/shop.png'></image>
					<view class="">
						门店管理
					</view>
				</view>
				<view class="flc sale-list">
					<view class="item tc" v-for="(item,i) in clerk" :key="i"  @click="navigateToHandle(item.router)">
						<view class="">
							<view class="">
								<image class='cell-hd-icon' :src='item.icon'></image>
							</view>
							<view class="text">
								<text class="">{{item.name}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="sale-block bgf">
				<view class="sale-title">
					<view style="font-weight: bold;font-size: 14px;">
						我的二手车
					</view>
				</view>
				<view class="flc sale-list">
					<!-- 微信小程序消息订阅 -->
					<!-- #ifdef MP-WEIXIN -->
				
					<!-- #endif -->
					<view class="item tc" v-for="(item,i) in order" :key="i" v-if="!item.unshowItem">
						<view class="" @click="navigateToHandle(item.router)">
							<view class="">
								<image class='cell-hd-icon' :src='item.icon'></image> <text class="">{{item.name}}</text>
							</view>

						</view>
					</view>
					<!-- #ifdef H5 || APP-PLUS || APP-PLUS-NVUE -->
					<view class="item tc">
						<view @click="showChat">
							<view class="">
								<image src='/static/image/me-ic-phone.png' class='cell-hd-icon'></image>
							</view>
							<view class="text">
								<text class="">联系客服</text>
							</view>
						</view>
					</view>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<!-- todo:: 微信客服 -->
					<!-- #endif -->
					<!-- #ifdef MP-TOUTIAO -->
					<!-- todo:: 头条客服 -->
					<!-- #endif -->
					<!-- #ifdef MP-ALIPAY -->
					<!-- todo:: 支付宝客服 -->
					<!-- #endif -->
				</view>
			</view>
		</view>

		<!-- 客服 -->
		<view class="kefu-text" style="font-size: 12px;">客服热线：{{shop_mobile}}</view>
	</view>
</template>


<script>
	import jihaiCopyright from '@/components/jihai-copyright/jihaiCopyright.vue'
	import {
		checkLogin
	} from '@/config/mixins.js'
	export default {
		components: {
			jihaiCopyright
		},
		mixins: [checkLogin],
		data() {
			return {
				open_id: '',
				hasLogin: true,
				userInfo: {}, // 用户信息
				kefupara: '', //客服传递资料
				afterSaleNums: 0,
				isClerk: false,
				alipayNoLogin: true,
				alipayName: '',
				alipayAvatar: '',
				config: '', //配置信息
				orderItems: [{
						name: '待付款',
						icon: '/static/images/yinhangka.png',
						nums: 0
					},
					{
						name: '待发货',
						icon: '/static/images/wuliu.png',
						nums: 0
					},
					{
						name: '待收货',
						icon: '/static/images/daifahuo.png',
						nums: 0
					},
					{
						name: '待评价',
						icon: '/static/images/gongjuxiang.png',
						nums: 0
					}
				],
				utilityMenus: {

					balance: {
						name: '余额',
						icon: '/static/images/money.png',
						router: '../balance/index',
						unshowItem: false
					},
					coupon: {
						name: '优惠券',
						icon: '/static/images/qian.png',
						router: '../coupon/index',
						unshowItem: false
					},

					address: {
						name: '收货地址',
						icon: '/static/images/weizhi.png',
						router: '../address/list',
						unshowItem: false
					},
				},
				clerk: [{
						name: '提货单列表',
						icon: '/static/image/ic-me-take.png',
						router: '../take_delivery/list'

					},
					{
						name: '提货单核销',
						icon: '/static/image/me-ic-about.png',
						router: '../take_delivery/index'
					}
				],
				order: {


					setting: {
						name: '我卖的车',
						icon: '/static/images/mai.png',
						router: '../mySellCar/mySellCar',
						unshowItem: false
					},
					history: {
						name: '询价记录',
						icon: '/static/images/zuji.png',
						router: '../history/index',
						unshowItem: false
					},
					collection: {
						name: '我的关注',
						icon: '/static/images/shoucang2.png',
						router: '../collection/index',
						unshowItem: false
					},
				},
				list: 1,
				suTipStatus: false,
				phoneNmuber:this.$store.state.config.shop_beian||'',//客服
				shop_mobile:this.$store.state.config.shop_mobile||'',//客服
				userToken:""
			}
		},
		onShow() {
			this.userToken = this.$db.get('userToken');
				console.log(this.userToken)
				console.log("this.userToken")
			if(this.userToken){
				this.initData();
			}
			console.log(this.phoneNmuber+"phoneNmuber")
			this.userToken = this.$db.get('userToken');
			
		},
		onLoad(){
			
		},
		methods: {
			//绑定手机号
			hanldPhone(){
				console.log('aaa')
					uni.navigateTo({
						url: '/pages/login/login/index'
					})
			},
			//充值
			handCoin(){
				uni.navigateTo({
					url: '/pages/member/balance/bankcardRecharge'
				})
			},
			hanldToUserInfo(){
				uni.navigateTo({
					url: '/pages/member/setting/user_info/index'
				})
			},
			goLogin() {
				uni.navigateTo({
					url: '/pages/login/choose/index'
				})
			},
			// getUserInfo(e) {
			// 	let _this = this;
			// 	//return false;
			// 	if (e.detail.errMsg == 'getUserInfo:fail auth deny') {
			// 		_this.$common.errorToShow('未授权')
			// 	} else {
			// 		var data = {
			// 			open_id: _this.open_id,
			// 			iv: e.detail.iv,
			// 			edata: e.detail.encryptedData,
			// 			signature: e.detail.signature
			// 		}
			// 		//有推荐码的话，带上
			// 		var invitecode = _this.$db.get('invitecode')
			// 		if (invitecode) {
			// 			data.invitecode = invitecode
			// 		}
			// 		_this.toWxLogin(data)
			// 	}
			// },
			// getALICode() {
			// 	let that = this;
			// 	uni.login({
			// 		scopes: 'auth_user',
			// 		success: (res) => {
			// 			if (res.authCode) {
			// 				uni.getUserInfo({
			// 					provider: 'alipay',
			// 					success: function(infoRes) {
			// 						if (infoRes.errMsg == "getUserInfo:ok") {
			// 							let user_info = {
			// 								'nickname': infoRes.nickName,
			// 								'avatar': infoRes.avatar
			// 							}
			// 							that.aLiLoginStep1(res.authCode, user_info);
			// 						}
			// 					},
			// 					fail: function(errorRes) {
			// 						this.$common.errorToShow('未取得用户昵称头像信息');
			// 					}
			// 				});
			// 			} else {
			// 				this.$common.errorToShow('未取得code');
			// 			}
			// 		},
			// 		fail: function(res) {
			// 			this.$common.errorToShow('用户授权失败my.login');
			// 		}
			// 	});
			// },
			// getWxCode() {
			// 	let that = this
			// 	uni.login({
			// 		scopes: 'auth_user',
			// 		success: function(res) {
			// 			if (res.code) {
			// 				that.wxLoginStep1(res.code)
			// 			} else {
			// 				this.$common.errorToShow('未取得code')
			// 			}
			// 		},
			// 		fail: function(res) {
			// 			this.$common.errorToShow('用户授权失败wx.login')
			// 		}
			// 	})
			// },
			// wxLoginStep1(code) {
			// 	this.$api.login1({
			// 		code
			// 	}, res => {
			// 		if (res.status) {
			// 			this.open_id = res.data
			// 		} else {
			// 			this.$common.errorToShow(res.msg, function() {
			// 				uni.navigateBack({
			// 					delta: 1
			// 				})
			// 			})
			// 		}
			// 	})
			// },
			// aLiLoginStep1(code, user_info) {
			// 	let data = {
			// 		'code': code,
			// 		'user_info': user_info
			// 	}
			// 	this.$api.alilogin1(data, res => {
			// 		this.alipayNoLogin = false;
			// 		if (res.status) {
			// 			this.open_id = res.data.user_wx_id
			// 			//判断是否返回了token，如果没有，就说明没有绑定账号，跳转到绑定页面
			// 			if (!res.data.hasOwnProperty('token')) {
			// 				this.$common.redirectTo('/pages/login/login/index?user_wx_id=' + res.data.user_wx_id);
			// 			} else {
			// 				this.$db.set('userToken', res.data.token)
			// 				this.initData()
			// 			}
			// 		} else {
			// 			this.$common.errorToShow(res.msg)
			// 		}
			// 	})
			// },
			// toWxLogin(data) {
			// 	let _this = this
			// 	_this.$api.login2(data, function(res) {
			// 		if (res.status) {
			// 			//判断是否返回了token，如果没有，就说明没有绑定账号，跳转到绑定页面
			// 			if (typeof res.data.token == 'undefined') {
			// 				uni.redirectTo({
			// 					url: '/pages/login/login/index?user_wx_id=' + res.data.user_wx_id
			// 				})
			// 			} else {
			// 				_this.$db.set('userToken', res.data.token)
			// 				_this.initData()
			// 			}
			// 		} else {
			// 			_this.$common.errorToShow('登录失败，请重试')
			// 		}
			// 	})
			// },
			toLogin() {
				uni.navigateTo({
					url:'/pages/login/login/index1'
				})
			},
			initData() {
				// 获取用户信息
				var _this = this
				//判断是开启分销还是原始推广
				if (this.$db.get('userToken')) {
					this.hasLogin = true
					this.$api.userInfo({}, res => {
						if (res.status) {
							_this.userInfo = res.data;
							
							// #ifdef MP-WEIXIN
							//微信小程序打开客服时，传递用户信息
							var kefupara = {}
							kefupara.nickName = res.data.nickname
							kefupara.tel = res.data.mobile
							_this.kefupara = JSON.stringify(kefupara)
							// #endif
							// 获取订单不同状态的数量
							let data = {
								ids: '1,2,3,4',
								isAfterSale: true
							}
							_this.$api.getOrderStatusSum(data, res => {
								if (res.status) {
									_this.orderItems.forEach((item, key) => {
										item.nums = res.data[key + 1]
									})
									_this.afterSaleNums = res.data.isAfterSale ?
										res.data.isAfterSale :
										0
								}
							})
						}
					})
				} else {
					// this.hasLogin = false
					// #ifdef MP-WEIXIN
					// this.getWxCode()
					// #endif
				}

			},
			navigateToHandle(pageUrl) {
				console.log(pageUrl)
				if (!this.hasLogin) {
					return this.checkIsLogin()
				}
				this.$common.navigateTo(pageUrl)
			},
			orderNavigateHandle(url, tab = 0) {
				if (!this.hasLogin) {
					return this.checkIsLogin()
				}
				this.$store.commit('orderTab', tab)
				this.$common.navigateTo(url)
			},
			goAfterSaleList() {
				if (!this.hasLogin) {
					return this.checkIsLogin()
				}
				this.$common.navigateTo('../after_sale/list')
			},

			
		},
		computed: {
			// 获取店铺联系人手机号
			shopMobile() {
				return this.$store.state.config.shop_mobile || 0;
			},
			invoice_switch() {
				return this.$store.state.config.invoice_switch || 2;
			},
			store_switch() {
				return this.$store.state.config.store_switch || 0;
			},
			isTip() {
				return this.suTipStatus;
			}
		},
		watch: {}
	}
</script>

<style lang="scss" scoped>
	.kefu-text {
		height: 24px;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 4px;
		border: 1px solid rgba(214, 34, 34, 1);
		font-weight: 500;
		color: rgba(214, 34, 34, 1);
		line-height: 20px;
		text-align: center;
		margin: 16px auto;
		width: 155px;
		padding: 2px;
	}

	.login-name-but {
		color: #333333;
		font-size: 16px;
		font-weight: bold;
		flex: 1;
		margin-left: 15px;
	}

	.member-top {
		position: relative;
		width: 100%;
		height: 184upx;
	}

	.bg-img {
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.member-top-c {
		flex-direction: row;
		height: 92px;
		align-items: center;
		width: 100%;
		display: flex;
		justify-content: space-between;

	}

	.user-head-img {
		display: block;
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		overflow: hidden;
		background-color: rgba(255, 255, 255, 0.7);
		margin: 0 0px 0 17px;

	}

	.user-name {
		font-size: 30upx;
		color: #fff;
		margin-bottom: 16upx;
	}

	.grade {
		color: #FFF;
	}

	.member-grid {
		background-color: #fff;
		border-bottom: 1px solid #eee;
		padding: 0px 0 17px 0;
	}

	.margin-cell-group {
		margin: 0upx 0;
		color: #333333;
		font-size: 15px;
	}

	.badge {
		left: 80upx;
		top: -6upx;
	}

	button.cell-item-hd {
		background-color: #fff;
		padding: 0;
		line-height: 1.4;
		color: #333;
	}

	button.cell-item-hd:after {
		border: none;
	}

	.login-btn {
		color: #fff;
		width: 180upx;
		height: 50upx;
		line-height: 50upx;
		border-radius: 25upx;
		background: #D62222;
		font-size: 12px;
	}

	.sale-block {
		padding: 0 20upx;
		margin-bottom: 20upx;

		.sale-title {
			height: 72rpx;
			line-height: 72rpx;
			border-bottom: 2rpx solid #f0f0f0;
			display: flex;
			align-items: center;

			.iconfont {
				margin-right: 12upx;
				color: $theme-color;
			}
		}

		.sale-list {
			justify-content: flex-start;
			flex-wrap: wrap;

			.item {
				width: 100%;
				padding: 30upx 0;

				.iconfont {
					font-size: 40upx;
					color: #5e5e5e;
				}

				.text {
					margin-top: 12upx;
					color: #4d4d4d;
					font-size: 24rpx;
				}
			}

			.tc {
				text-align: left;

				.cell-hd-icon {
					float: none;
					height: 17px;
					margin: 0 5px 0 0;
					vertical-align: middle;
				}
			}
		}
	}
	.ph-wrapper{
		display: flex;
		flex-direction: column;
		flex:1;
		margin-left: 30upx;
	}
</style>
